<template>
  <div class="my-container">
    <!-- 个人信息 -->
    <div class="user-info">
      <div class="base-info">
        <van-cell-group v-if="user" class="my-info">
          <!-- 顶部头像编辑资料区域 -->
          <van-cell 
            class="base-info"
            center
            :border="false">

            <van-image
            class="avatar"
              slot="icon"
              round
              fit="cover"
              :src="currentUser.photo"
            />
            <div slot="title" class="name">{{currentUser.name}}</div>
            <van-button 
              class="update-btn"
              size="small" 
              round
              @click="$router.push('/profile')"
              >编辑资料</van-button>
          </van-cell>
          <van-grid :border="false" class="data-info">
            <van-grid-item class="data-info-item">
              <div slot="text" class="text-warp">
                <div class="count">{{currentUser.art_count}}</div>
                <div class="text">头条</div>
              </div>
            </van-grid-item>
            <van-grid-item class="data-info-item">
              <div slot="text" class="text-warp">
                <div class="count">{{currentUser.follow_count}}</div>
                <div class="text">关注</div>
              </div>
            </van-grid-item>
            <van-grid-item class="data-info-item">
              <div slot="text" class="text-warp">
                <div class="count">{{currentUser.fans_count}}</div>
                <div class="text">粉丝</div>
              </div>
            </van-grid-item>
            <van-grid-item class="data-info-item">
              <div slot="text" class="text-warp">
                <div class="count">{{currentUser.like_count}}</div>
                <div class="text">获赞</div>
              </div>
            </van-grid-item>
          </van-grid>       
        </van-cell-group>
            <!-- 未登录时登录区域 -->
        <div v-else class="not-login">
          <div @click="$router.push('/login')">
            <img src="./mobile.png" alt="" class="mobile">
          </div>
          <div class="text">登录  /  注册</div>
        </div>

        <van-grid :column-num="2" class="nav-grid mb-4">
          <van-grid-item 
            icon-prefix="toutiao"
            icon="shoucang" 
            text="收藏" 
            class="nav-grid-item"/>
          <van-grid-item 
            icon-prefix="toutiao"
            icon="lishi" 
            text="历史" 
            class="nav-grid-item"/>
        </van-grid>
        <van-cell title="消息通知" is-link to="/" />
        <van-cell class="mb-4" title="小智同学" is-link to="/user/chat" />
        <van-cell v-if="user" class="logout-cell" title="退出登录" @click="onLogout"/>
      </div>
      <div class="data-info"></div>
    </div>
  </div>


</template>

<script>
import {mapState} from 'vuex'
import {getCurrentUser} from '@/api/user'


export default {
components:{},
props:{},
created() {
  this.loadCurrentUser()
},
data() {
  return {
    currentUser:{}
  }
},
computed:{
  ...mapState(['user'])
},
methods: {
  // 退出登录
  onLogout(){
    this.$dialog.confirm({
      title:'退出提示',
      message: '确认退出吗？',
    })
    .then(() => {
      // 清楚登录状态，把vuex里的user清空
      this.$store.commit('setUser', null)
    })
  },
  async loadCurrentUser(){
    const {data} = await getCurrentUser()
    this.currentUser = data.data
  }
},
}
</script>

<style lang="less" scoped>
 .my-container{
   .my-info{
     background:url('./banner.png') no-repeat;
     background-size: cover;
     .base-info{
       box-sizing: border-box;
       height: 115px;
       background-color: unset;
       padding-top: 38px;
       padding-bottom: 11px;
       .avatar{
         box-sizing: border-box;
         width: 66px;
         height: 66px;
         border: 1px solid #fff;
         margin-right: 11px;
       }
       .name{
         color: #fff;
         font-size: 15px;
       }
       .update-btn{
         height: 25px;
         font-size: 10px;
         color: #666;
       }
     }
     .data-info{
       .data-info-item{
         height: 65px;
         color: #fff;
          .text-warp{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
            .count{
              font-size: 18px;
            }
            .text{
              font-size: 11px;
            }
       }
       }


     }

     /deep/ .van-grid-item__content{
       background-color: unset;
     }
   }
  //  未登录区域
   .not-login{
     height: 180px;
     background:url('./banner.png') no-repeat;
     background-size: cover;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     .mobile{
       width: 66px;
       height: 66px;
     }
     .text{
       font-size: 14px;
       color: #fff;
     }
   }
  /deep/ .nav-grid{
   .nav-grid-item{
     height: 70px;
     .toutiao{
       font-size: 22px;
     }
     .toutiao-shoucang{
       color: #eb5253;
     }    
     .toutiao-lishi{
       color: #ff9d1d;
     }
     .van-grid-item__text{
       font-size: 14px;
       color: #333;
     }
    }
  }
  .logout-cell{
    text-align: center;
    color: #d86262;
  }
  .mb-4{
    margin-bottom: 8px;
  }

 }
</style>